/*reset.less*/
@charset "gb2312";

/* CSS Document */
html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	font-size: 62.5%;
}
ul, li, div, p, body, h1, h2, h3, h4, h5, h6, dl, dt, dd {
	margin: 0;
	padding: 0;
	-webkit-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	user-select: none;
	text-align: left;
}
input {
	-webkit-appearance: button;
}
li {
	list-style: none;
}
a {
	text-decoration: none;
	color: #2a2a2a;
}
input {
	-webkit-appearance: none;
	outline: none
}
* {
	outline: none;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	-webkit-focus-ring-color: rgba(0, 0, 0, 0);
}
.hide {
	display: none;
}
body, html {
	width: 100%;
	font-family: "Microsoft YaHei", "Helvetica Neue", Arial, HelveticaNeue, Helvetica, "BBAlpha Sans", sans-serif;
	font-weight: normal;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-box-align: center;
}
* {
	-webkit-tap-highlight-color: rgba(14, 159, 111, 0.5);
	-webkit-touch-callout: none;
}
* {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}
body {
	opacity: 1;
	-webkit-transition: opacity 500ms ease-in;
	transition: opacity 500ms ease-in;
}
p, a, li {
	font-size: 1.2rem;
	color: #434343
}

/*common.less 此处仅给出框架样式示例，具体要根据页面类型自行调整框架样式*/
@media screen and (min-width:360px) and (max-width:374px) {
	html {
		font-size: 70.3%;
	}
}
@media screen and (min-width:375px) and (max-width:383px) {
	html {
		font-size: 73.24%;
	}
}
@media screen and (min-width:384px) and (max-width:399px) {
	html {
		font-size: 75%;
	}
}
@media screen and (min-width:400px) and (max-width:413px) {
	html {
		font-size: 78.125%;
	}
}
@media screen and (min-width:414px) and (max-width:431px) {
	html {
		font-size: 80.86%;
	}
}
@media screen and (min-width:432px) and (max-width:479px) {
	html {
		font-size: 84.375%;
	}
}

/*下面两个是针对android pad分辨率设置的，根据页面类型确定是否在pad中对页面进行放大，需要的话保留下面两个设置，如果不需要，去掉下面两行的设置并把上一行的(max-width:479px)去掉*/
@media screen and (min-width:480px)and (max-width:639px) {
	html {
		font-size: 93.75%;
	}
}
@media screen and (min-width:640px) {
	html {
		font-size: 125%;
	}
}
#forhorview{
    position: fixed;
    z-index: 600;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: none;
    
}

#forhorview p{
    height: 100%;
    color: #fff;
    font-size: 1.8rem;
    text-align: center;
    position: relative;
    top: 50%;
    margin: -1.8rem;
}
.g-screen{
	height: 100%;
	overflow: hidden;
}
.g-screen .m-screen-content{
	width: 32rem;
	height:40rem;
	margin:0 auto;
	-webkit-transition: all .3s ease 0s;
	-o-transition: all .3s ease 0s;
	transition: all .3s ease 0s;
	position: relative;
}
.g-screen-1{
	background: url(../img/screen1-bg.png) repeat;
}
.g-screen-1 .m-screen-content{
	background: url(../img/bg1.png) no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	width: 26.55rem;
	height:46.45rem;
	margin-top: 3rem;
}
.g-screen-3{
	background: url(../img/screen-bg.png) repeat;
}

.g-screen-3 .m-screen-content{
	background: url(../img/bg3.png) no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	width: 32rem;
	height:50rem;
	margin-top: 2.5rem;
}
.g-screen-2{
	background: url(../img/screen-bg.png) repeat;
}
.g-screen-2 .m-screen-content{
	background: url(../img/bg2.png) no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	width: 24.9rem;
	height:49.1rem;
	margin-top: 2.5rem;
}
.g-screen-4{
	background: url(../img/screen-bg.png) repeat;
}
.g-screen-4 .m-screen-content{
	background: url(../img/bg4.png) no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	width: 32rem;
	height:49.1rem;
	margin-top: 2.5rem;
}
body,html{
	background-color: #fff;
	width: 100%;
	height:100%;
}
.g-main{
	width: 100%;
	height:100%;
	-webkit-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

.g-scroll-1 .g-main{
	-webkit-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.g-scroll-2 .g-main{
	-webkit-transform: translate3d(0,-100%,0);
	-ms-transform: translate3d(0,-100%,0);
	-o-transform: translate3d(0,-100%,0);
	transform: translate3d(0,-100%,0);
}

.g-scroll-3 .g-main{
	-webkit-transform: translate3d(0,-200%,0);
	-ms-transform: translate3d(0,-200%,0);
	-o-transform: translate3d(0,-200%,0);
	transform: translate3d(0,-200%,0);
}

.g-scroll-4 .g-main{
	-webkit-transform: translate3d(0,-300%,0);
	-ms-transform: translate3d(0,-300%,0);
	-o-transform: translate3d(0,-300%,0);
	transform: translate3d(0,-300%,0);
}


.g-screen-1 .btn-dl{
	position: absolute;
    left: 50%;
    width: 21.7rem;
    height: 3rem;
    top: 15rem;
    margin-left: -10rem;
    z-index: 1;
}


.g-screen .arrow{
	position: absolute;
    left: 50%;
    width: 3.35rem;
    height: 1.7rem;
    top: 48rem;
    margin-left: -1.675rem;
    z-index: 1;
    background: url(../img/arrow-d.png) no-repeat 0 0;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;

    -webkit-animation:arrow 1s ease-in-out 0s infinite;

}

.g-screen-2 .arrow{
    top: 46rem;
    background: url(../img/arrow-d1.png) no-repeat 0 0;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
}

.g-screen-3 .arrow{
    top: 47rem;
    background: url(../img/arrow-d1.png) no-repeat 0 0;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
}

.g-screen-4 .arrow{
    top: 43rem;

}
.screen-s .g-screen .m-screen-content{
	-webkit-transform:scale(0.8) translate3d(0,-6rem,0);
}
.screen-s .g-screen-4 .m-screen-content{
	-webkit-transform:none;
}

@-webkit-keyframes arrow{
	0% {
		-webkit-transform:translate3d(0,0,0);
	}
	50% {
		-webkit-transform:translate3d(0,100%,0);
	}
	100% {
		-webkit-transform:translate3d(0,0,0);
	}
}